import React, { Component } from 'react';
import { Flex } from 'antd-mobile';
import { NavBar, Icon, Tabs, List, Button, Picker} from 'antd-mobile';
import { Link } from 'react-router-dom';
import { get } from '../api/getData';
import moment from "moment";

import 'antd-mobile/lib/flex/style/index';
import 'antd-mobile/lib/nav-bar/style/css';
import 'antd-mobile/lib/icon/style/css';
import 'antd-mobile/lib/tabs/style/css';
import 'antd-mobile/lib/list/style/css';
import 'antd-mobile/lib/button/style/css';
import 'antd-mobile/lib/picker/style/css';
const Item = List.Item;
const Brief = Item.Brief;
class TaokeOrder extends Component {
    constructor(props){
        super(props);
    }
    render() {

        return (<List style={{width:'100%'}}>
            {/* <div style={{ display: 'flex', alignItems: 'center', justifyContent: 'center',height:'50px'}}>
                <Picker
                    data={this.state.data}
                    cols={this.state.cols}
                    value={this.state.asyncValue}
                    onPickerChange={this.onPickerChange}
                    onOk={v => console.log(v)}
                    title="全部订单"
                    >
                        <List.Item arrow="horizontal" onClick={this.onClick}>Multiple & async</List.Item>
                </Picker>
            </div> */}
            {this.props.list.map(function(item, index){
                return (<div style = {{marginBottom: '20px'}}>
                    <Item style={{fontSize:'12px',color:'gray'}}>
                        <Flex wrap="wrap">
                            <span style={{fontSize:'12px',color:'gray'}}>订单编号：{item.order_id}</span>
                        </Flex>
                    </Item>
                    <Item
                        thumb={item.goods_pic}
                        multipleLine
                        onClick={() => {}}
                    >
                        <Flex wrap="wrap">
                            <span style={{width:'100%',fontSize:'14px',whiteSpace:'normal'}}>{item.title}
                            <Brief>
                                {
                                    item.status == 1?
                                        <Button size='small' inline style={{background:'#ccc',color:'white',borderRadius:'20px'}}>已失效</Button>
                                    :item.status == 2?
                                        <Button size='small' inline style={{background:'#31f300',color:'white',borderRadius:'20px'}}>已付款</Button>
                                    :item.status == 3?
                                        <Button size='small' inline style={{background:'orange',color:'white',borderRadius:'20px'}}>已结算</Button>
                                    :item.status == 4?
                                        <Button size='small' inline style={{background:'#00d5ea',color:'white',borderRadius:'20px'}}>已完成</Button>
                                    :''

                                }
                            </Brief></span>
                        </Flex>
                    </Item>
                    <Item >
                        {
                            item.agent?
                                <Flex justify='around' alignContent='center' style={{textAlign:'center'}}>
                                    <span>付款金额<Brief style={{color:'black'}}><strong>¥{item.paid_amount}</strong></Brief></span>
                                    {item.commission2_rate == null?
                                        <span>收入提成<Brief style={{color:'black'}}><strong>0%</strong></Brief></span>
                                        :
                                        <span>收入提成<Brief style={{color:'black'}}><strong>{item.commission2_rate}%</strong></Brief></span>
                                    }
                                    <span>预估收入金额<Brief style={{color:'red'}}><strong>¥{item.commission2}</strong></Brief></span>
                                </Flex>
                            :
                                <Flex justify='around' alignContent='center' style={{textAlign:'center'}}>
                                    <span>付款金额<Brief style={{color:'black'}}><strong>¥{item.paid_amount}</strong></Brief></span>
                                    {item.commission1_rate == null?
                                        <span>收入提成<Brief style={{color:'black'}}><strong>0%</strong></Brief></span>
                                        :
                                        <span>收入提成<Brief style={{color:'black'}}><strong>{item.commission1_rate}%</strong></Brief></span>
                                    }
                                    <span>预估收入金额<Brief style={{color:'red'}}><strong>¥{item.commission1}</strong></Brief></span>
                                </Flex>
                         }
                    </Item>
                    {
                        (item.status == 3 || item.status == 4)?
                            <Item extra={<span style={{fontSize:'12px',}}>{moment(item.settled_time).format('YYYY-MM-DD HH:mm')} 结算</span>} style={{fontSize:'12px',color:'gray'}}>
                                <Flex wrap="wrap">
                                    <span style={{fontSize:'12px',color:'gray'}}>{moment(item.create_time).format('YYYY-MM-DD HH:mm')} 创建</span>
                                </Flex>
                            </Item>:
                            <Item style={{fontSize:'12px',color:'gray'}}>
                                <Flex wrap="wrap">
                                    <span style={{fontSize:'12px',color:'gray'}}>{moment(item.create_time).format('YYYY-MM-DD HH:mm')} 创建</span>
                                </Flex>
                            </Item>
                    }

                </div>)
            })}
        </List>)
    }
}

export default TaokeOrder;
